<template>
    <van-sticky>
        <van-nav-bar title="拼团" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>

    <!-- 地址设置 -->
    <van-contact-card type="add" @click="ToAddress" v-if="addressDefault.hasOwnProperty('id') === false" />
    <van-contact-card type="edit" :tel="addressDefault.mobile" :name="addressDefault.consignee" @click="ToAddress"
        v-else />

    <van-card :title="product.name" :num="nums">
        <template #thumb>
            <van-image width="100%" height="100%" fit="cover" :src="product.thumb_cdn" />
        </template>
        <template #tags>
            <van-tag plain type="danger" v-if="!attrs">无商品规格</van-tag>
            <div v-else>
                <van-tag plain type="primary" v-for="item in attrs" :key="item.id">{{ item.value
                    }}￥{{ item.price }}</van-tag>
            </div>
        </template>
        <template #price>
            <div class="price">拼团价格：￥{{ product.team }}</div>
        </template>
    </van-card>

    <van-cell title="支付方式" :value="PayActive.text" is-link @click="PayShow = true" />
    <!-- PayActive.text选中的值， -->

    <van-popup v-model:show="PayShow" round position="bottom">
        <van-picker title="选择支付方式" :columns="PayList" @cancel="PayShow = false" @confirm="onPayConfirm" />
        <!-- @confirm="onPayConfirm"确认选择哪种支付方式  -->
    </van-popup>

    <!--订单备注 -->
    <van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" maxlength="120" placeholder="请输入订单备注"
        show-word-limit />

    <!-- 提交动作栏 -->
    <van-submit-bar text-align="left" :price="total" button-text="确认支付" @submit="onSubmit" />
</template>

<script setup>
const { proxy } = getCurrentInstance();
const busid = proxy.$cookies.get("business").id;
const proid = ref(proxy.$route.query.proid);
const teamid = ref(proxy.$cookies.get('teamid') ?? 0);     //拼团id
const nums = ref(proxy.$cookies.get('nums') ?? 0);         //商品数量
const remark = ref("");                                   //备注
const total = computed(() => {                           //拼团费用
    let num = 0;
    for (let item of attrs.value) {
        num += parseInt(item.price);
    }
    num += parseInt(product.value.team);
    num = (parseInt(nums.value) * num).toFixed(2);
    return num * 100;
});                                       
const relationids = ref(proxy.$cookies.get('relationids') ?? 0);
const addressDefault = ref({});
const product = ref([]);
const attrs = ref([]);
const PayList = ref([
    { text: '余额支付', value: 'money' },
    { text: '支付宝支付', value: 'zfb' },
    { text: '微信支付', value: 'wx' }
]);
const PayActive = ref(PayList.value[0]);  //支付方式
const PayShow = ref(false);       //支付方式触发，true为显示，false为不显示

//确认支付方式
const onPayConfirm = ({ selectedOptions }) => {
    PayActive.value = selectedOptions[0];

    PayShow.value = false;
}

//提交订单
const onSubmit = async () => {
    let params = {
        busid:busid,
        proid:proid.value,
        relationids:relationids.value,
        teamid:teamid.value,
        remark:remark.value,
        pay:PayActive.value.value,
        addrid:addressDefault.value.id
    }

    let result = await proxy.$post({
        url:'/product/team/add',
        params
    })

    if(result.code === 1)
    {
        proxy.$NotifySuccess({
            msg:result.msg,
            onClose:() => {
                proxy.$cookies.remove('teamid');
                proxy.$cookies.remove('nums');
                proxy.$router.push('/product/team/order');
            }
        })
    }else{
        proxy.$NotifyWarn(result.msg);
    }
}

onBeforeMount(() => {
    address();
    getTeamInfo();
})

//地址
const address = async () => {
    let params = {
        busid: busid
    }

    let result = await proxy.$post({
        url: '/product/order/address',
        params
    });

    if (result.code === 1) {
        addressDefault.value = result.data;
    }
}

const getTeamInfo = async () => {
    let params = {
        busid: busid,
        teamid: teamid.value,
        relationids: relationids.value
    }

    let result = await proxy.$post({
        url: '/product/team/confirm',
        params
    })

    if (result.code === 1) {
        product.value = result.data.product;
        attrs.value = result.data.relation;
    } else {
        proxy.$NotifyWarn({
            message: result.msg,
            onClose: () => {
                // onClickLeft();
            }
        })
    }
}

//跳转到地址页面
const ToAddress = () => {
    proxy.$router.push({ path: '/business/address/index', query: { action: 'order' } })
}

//返回上一级
const onClickLeft = () => {
    proxy.$router.back();
};
</script>

<style scoped>
.height50 {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}
</style>